<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id='canv'></canvas>
</body>
</html>
<script>
    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / FPS);
                };
    })();

    var curlicue = {};

    (function (it) {

        var c,
                $,
                arr = [],
                FPS = 60,
                w,
                h;

        function go() {
            c = document.getElementById('canv');
            $ = c.getContext('2d');
            w = c.width = window.innerWidth;
            h = c.height = window.innerHeight;

            c.style.position = 'absolute';
            c.style.top = 0;
            c.style.bottom = 0;
            c.style.left = 0;
            c.style.right = 0;

            window.addEventListener('resize', resize, false);
            draw();
        }

        function resize() {
            w = c.width = window.innerWidth;
            h = c.height = window.innerHeight;
        }

        function erase() {
            $.fillStyle = 'hsla(0, 0%, 0%, .9)';
            $.globalAlpha = 0.5 + Math.random() * 0.5;
            $.fillRect(0, 0, w, h);
        }

        function draw() {
            for (var idx = 0, len = Math.ceil(w / 5); idx < len; idx++) {
                arr.push({
                    x: w / 2 || 0,
                    y: -20,
                    vel_y: Math.random() * 9,
                    grav: 2,
                    color: 'rgb' + '(' + Math.floor(Math.random() * 205) +
                    ', ' + Math.floor(Math.random() * 215) + ', ' +
                    Math.floor(Math.random() * 255) + ')',
                    rad: 7,
                    alpha: 1,
                    scale: Math.random() * .5,
                    deg: 0,
                    sp: 0.04 + Math.random() * 0.04,
                    ang: 0,
                    rot: 50
                });
            }
            cyc();
        }

        function cyc() {
            erase();
            arr.forEach(function (spiral, idx) {
                var contW = Math.max(spiral.x, 0) >
                        0 && Math.min(spiral.x, w) < w;
                var contH = Math.max(spiral.y, 0) >= -20 && Math.min(spiral.y, h) < h;

                if (contW && contH) {
                    $.save();
                    $.beginPath();
                    $.globalAlpha = spiral.alpha;
                    $.globalCompositeOperation = 'lighter';
                    $.translate(spiral.x, spiral.y);
                    $.scale(spiral.scale, spiral.scale);
                    $.rotate(spiral.deg * Math.PI / 360);
                    $.fillStyle = spiral.color;
                    $.arc(spiral.rad, spiral.rad, spiral.rad, 0, Math.PI * 2, true);
                    $.fill();
                    $.restore();
                    spiral.deg = Math.min(spiral.deg + 1, 360) === 360 ?
                            0 : spiral.deg += 1;
                    spiral.alpha = Math.max(spiral.alpha - 0.001, 0.1) === 0.1 ?
                            Math.random() : spiral.alpha -= 0.001;

                    var cush = idx;
                    spiral.rot = Math.min(spiral.rot + 0.9 +
                            Math.random() * 0.9, 200);

                    spiral.x = w / 2 + Math.sin(spiral.ang + cush) *
                            spiral.rot;
                    spiral.y += spiral.vel_y;
                    spiral.y += spiral.grav;
                    spiral.ang += spiral.sp;
                } else {
                    spiral.x = w / 2 || 0;
                    spiral.y = -20;
                    spiral.vel_y = Math.random() * 7;
                    spiral.grav = 2;
                    spiral.color = 'rgb' + '(' + Math.floor(Math.random() * 205) + ', ' + Math.floor(Math.random() * 215) + ', ' +
                            Math.floor(Math.random() * 255) + ')';
                    spiral.alpha = .9;
                    spiral.scale = Math.random() * 1.1;
                    spiral.sp = 0.05 + Math.random() * 0.05;
                }
            });
            window.requestAnimFrame(cyc);
        }

        window.addEventListener ?
                window.addEventListener('load', go, false) :
                window.onload = go;
    })(curlicue);

</script>